React Router

React Router 是一個專門用於 React 應用中的路由管理庫。它允許你在SPA中輕鬆地設定多個不同的頁面，並根據 URL 的變化動態渲染對應的組件，而不必真正刷新整個網頁。

官方說明文件：Home v6.26.2 | React Router

核心概念

1. Router（路由器）

• Router 是一個負責管理 URL 與組件之間對應關係的容器。React Router 提供了多種 Router，比如在瀏覽器環境中常用的 BrowserRouter。

2. Route（路由）

• Route 是定義當前 URL 匹配某個模式時要顯示哪個組件的核心。你可以為不同的 URL 定義不同的 Route，當 URL 匹配時，對應的組件會被渲染。

• 使用方法：
<Route path="/about" element={<About />} />

3. Link（連結）

• Link 是 React Router 提供的組件，用於創建頁面之間的導航連結。這個連結不會導致頁面刷新，而是會變更 URL 並動態渲染對應的組件。

• 使用方法：
<Link to="/about">Go to About</Link>

Router架構

安裝 React-router-dom

npm i react-router-dom

會使用到的有四個元件：
BrowserRouter、Routes、Route以及Link

修改PlacetItem

Link 是 react-router-dom 提供的一個元件，用來在 React 應用中進行客戶端的路由導航，而不會觸發整個頁面的重新加載。這裡讓我更詳細說明 Link 的作用及其配置方式：

Link 的作用

Link 元件在 React 中用來取代傳統的 HTML <a> 標籤。不同的是，Link 不會導致瀏覽器的頁面重載，而是利用 react-router-dom 提供的內部路由機制進行無縫導航，從而實現單頁應用程序 (SPA) 的體驗。

程式碼詳解

<Link to={`/places/id/${place.id}`}>

1. to 屬性：

   • to 用來指定 Link 導向的目標 URL。在這裡你使用了模板字串來動態生成 URL，會將 place.id 插入到 /places/id/ 之後。假設 place.id 是 1，那麼這個 Link 將生成的路徑會是 /places/id/1。

2. 導航過程： 當使用 Link 點擊後，React 不會重新加載頁面，而是會利用 react-router-dom 的路由機制來更改 URL 並渲染對應的路由內容。這樣能夠讓應用保持響應迅速，並且保留應用的狀態。

3. 代替 <a> 標籤： 如果你使用 <a href="/places/id/1">，每次點擊都會觸發瀏覽器進行完整的頁面刷新。而 Link 則避免了這一點，讓導航更加順暢。

與 Route 的關聯

要正確導航，Link 指向的路徑 /places/id/:placeId 必須在你的路由設定中存在對應的 Route。你已經在之前的程式碼中定義了如下路由：

<Route path="places/id/:placeId" element={<Place />} />

這樣，當 Link 導向 /places/id/1 時，Route 會捕捉到這個 URL，並渲染對應的 Place 元件。

新增PlaceDetail頁面

這個部分只是暫時的，還沒有仔細排版

新增Place頁面

程式碼解釋：

1. useParams()

const { placeId } = useParams();

• useParams() 是 react-router-dom 中的一個鉤子，用來從當前路由的 URL 中獲取動態參數。在這裡，useParams 返回了一個包含 URL 中所有動態參數的對象。
• 在你的路由架構中，path="places/id/:placeId" 指定了 :placeId 是一個動態參數。useParams() 會抓取這個 placeId，並將其提取為變數 placeId。
  • 如果當前訪問的 URL 是 /places/id/1，那麼 useParams() 會返回 { placeId: '1' }，因此 placeId 的值就是 '1'。

2. 從 JSON 文件中查找對應的地點

const place = places.find( (x) => x.id === placeId );

• places 是從 ../json/place.json 文件導入的資料，假設它是一個包含多個地點資訊的陣列，每個地點都有唯一的 id。
• places.find() 是用來遍歷 places 陣列並查找與 placeId 相匹配的地點。回調函式 (x) => x.id === placeId 確保只返回 id 與 placeId 相同的地點資料。
  • 比如如果 placeId 是 '1'，並且 places 中有一個對象 { id: '1', name: 'Place Name', ... }，那麼 find() 會返回該對象並將其賦值給變數 place。

3. 返回的 JSX 結構

return ( <div> <Header /> <PlaceDetail place={place} /> </div> );

• Header 元件：通常用來顯示頁面的標題或導航條。這裡它被渲染在最頂部。
• PlaceDetail 元件：這個元件接收 place 作為 prop，並顯示這個地點的詳細資訊。由於 place 是根據 placeId 從 places 中篩選出來的，因此它包含了當前地點的所有資料。

假設的資料結構 (place.json)

假設你的 place.json 文件看起來像這樣：

[ { "id": "1", "name": "Great Park", "description": "A large urban park.", "image": "great_park.jpg" }, { "id": "2", "name": "Blue Lake", "description": "A beautiful lake surrounded by mountains.", "image": "blue_lake.jpg" } ]

完整流程解釋

1. 當使用者訪問 /places/id/1 時，react-router-dom 的路由系統會渲染 Place 元件，並且 useParams() 從 URL 中提取 placeId = '1'。
2. 透過 places.find()，placeId 會在 places 陣列中查找對應的地點資料（如 id: '1' 的地點）。
3. 找到的 place 資料會被傳遞給 PlaceDetail 元件，然後顯示該地點的具體內容。
4. 同時，Header 組件會渲染在頁面頂部，提供標題或導航功能。

這段程式碼主要利用 react-router-dom 的 useParams 提供的動態路由參數來動態顯示對應的內容。